<template>
  <div>
    <!-- 全局组件  在main.js中定义，一次定义，到处使用 -->
    <!-- <globalChild /> -->

    <!-- 使用组件 第3步 -->
    <child1 :cnt="cnt" />
    <hr />
    <Button btn="添加用户" color="blue" :users="users" @addUser="addUser" />
    <hr />
    <!-- <Button btn="111111" color="green" /> -->
    <hr />
    <!-- <Button /> -->
  </div>
</template>

<script>
// 引入局部组件 第1步
import child1 from "./components/Child1";
import Button from "./components/Button";

export default {
  methods: {
    // 自定义事件，参数就是通过$emit参数2传过来的数据
    addUser(params) {
      // this.users.push(params)
      this.users.unshift(params);
    },
  },
  data() {
    return {
      // 用户列表
      users: [{ id: 1, name: "张三" }],
      cnt: "我是一个内容",
    };
  },
  // 注册局部组件到当前组件中  第2步
  components: { child1, Button },
};
</script>

<style lang='scss' scoped>
</style>